<template>
  <div class="articles">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div v-for="article in articles" :key="article.id">
      <van-col span="2">
        <van-image width="100" height="100" :src="article.icon" />
      </van-col>
      <van-col span="19" offset="3">
        <p class="author">{{ article.name}}</p>
      </van-col>
      <div class="content">
        <p class="title">{{ article.content }}</p>
      </div>
      <!-- 底部 -->
      <foo-ter></foo-ter>
      <!--分割线  -->
      <div class="gap"></div>
    </div>
    </van-pull-refresh>  
  </div>
</template>
<script>
import fooTer from "@/components/fooTer";
import axios from 'axios'
import { Toast } from 'vant';
export default {
  components: {
    
    fooTer,
  },
  data() {
    return {
      isLoading: false,
      articles: [],
    };
  },
      created() {
      axios.get('http://localhost:3000/news_article')
        .then(res => {
           this.articles=res.data.data
          // console.log(res);
        })
        .catch(error => {
          console.log(error);
        })
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
         // 使用mock模拟数据
      axios.get('/api/article/index')
        .then(res => {
          this.articles=[]
          this.articles=res.data.data
          // console.log(res);
        })
        .catch(error => {
          console.log(error);
        })
      }, 1000);
    },
  },
};
</script>
<style scoped>
.author {
  color: #ff9800;
  padding-top: 10px;
  font-size: 17px;
}
.title {
  line-height: 40px;
}
.picture {
  width: 50%;
  padding-left: 30px;
  margin-top: -15px;
}
.gap {
  margin-top: 1px;
  height: 2px;
  background: lightgray;
}
  .content{
      width: 90%;
      padding-left: 20px;
  }

</style>